<!doctype html>
<html lang="en-US">

<head>
  <link href="/assets/index.css" rel="stylesheet" type="text/css" />
  <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
  <script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.production.min.js"></script>
  <script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.production.min.js"></script>
  <script crossorigin="anonymous" src="/test-harness.js"></script>
  <script crossorigin="anonymous" src="/test-page-object.js"></script>
  <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
  <script crossorigin="anonymous" src="/__dist__/botframework-webchat-fluent-theme.production.min.js"></script>
  <style>
    .flair {
      border-radius: inherit;
      border: solid 2px red;
    }

    .loader {
      border-bottom: solid 4px blue;
    }
  </style>
</head>

<body>
  <main id="webchat"></main>
  <script type="text/babel">
    run(async function () {
      const {
        React,
        ReactDOM: { render },
        WebChat: {
          decorator: { createActivityBorderMiddleware, DecoratorComposer },
          FluentThemeProvider,
          ReactWebChat
        }
      } = window; // Imports in UMD fashion.

      function Flair({ request, Next, ...props }) {
        return <div className={request.livestreamingState === 'completing' ? 'flair' : ''}>
          <Next {...props} showFlair={false} />
        </div>;
      }

      function Loader({ request, Next, ...props }) {
        return <div className={request.livestreamingState === 'preparing' ? 'loader' : ''}>
          <Next {...props} showLoader={false} />
        </div>;
      }

      const decoratorMiddleware = [
        createActivityBorderMiddleware(Flair),
        createActivityBorderMiddleware(Loader)
      ];

      const { directLine, store } = testHelpers.createDirectLineEmulator();

      const App = () => (
        <ReactWebChat
          directLine={directLine}
          store={store}
          styleOptions={{
            bubbleBorderRadius: 10,
            typingAnimationBackgroundImage: `url('')`
          }}
        />
      );

      render(
        <FluentThemeProvider>
          <DecoratorComposer middleware={decoratorMiddleware}>
            <App />
          </DecoratorComposer>
        </FluentThemeProvider>,
        document.getElementById('webchat')
      );

      await pageConditions.uiConnected();

      await directLine.emulateIncomingActivity({
        channelData: { streamSequence: 1, streamType: 'informative' },
        from: {
          id: 'u-00001',
          name: 'Bot',
          role: 'bot'
        },
        id: 't-00001',
        text: 'Working on it...',
        type: 'typing'
      });

      await pageConditions.numActivitiesShown(1);
      await host.snapshot();

      const attachments = [
        {
          content: {
            type: 'AdaptiveCard',
            $schema: 'http://adaptivecards.io/schemas/adaptive-card.json',
            version: '1.5',
            actions: [
              { type: 'Action.Submit', title: 'Button 1' },
              {
                type: 'Action.ShowCard',
                title: 'Show card',
                card: {
                  type: 'AdaptiveCard',
                  $schema: 'http://adaptivecards.io/schemas/adaptive-card.json',
                  version: '1.5',
                  actions: [
                    { type: 'Action.Submit', title: 'Button 2' },
                    { type: 'Action.Submit', title: 'Button 3' }
                  ]
                }
              }
            ]
          },
          contentType: 'application/vnd.microsoft.card.adaptive'
        }
      ];
      await directLine.emulateIncomingActivity({
        attachments,
        channelData: { streamId: 't-00001', streamType: 'final' },
        from: {
          id: 'u-00001',
          name: 'Bot',
          role: 'bot'
        },
        id: 'm-00001',
        text: 'Work completed!'
      });

      await pageConditions.numActivitiesShown(1);

      // THEN: Should render the activity.
      await host.snapshot();
    });
  </script>
</body>

</html>